<template>
  <div ref="rightPanel" :class="{ show: show }" class="rightPanel-container">
    <div class="rightPanel-background" />
    <div class="rightPanel">
      <div :style="{ 'top': buttonTop + 'px', 'background-color': theme }" class="button-panel">
        <div class="handle-button" @click="show = !show">
          <svg-icon icon-class="setting" class="el-input__icon" />
          <span style="margin-top:5px;">主题</span>
        </div>
      </div>
      <div class="rightPanel-items">
        <slot />
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { useStore } from '@/store'
import { addClass, removeClass } from '@/utils'
import {  ref, computed, watch, onMounted } from 'vue'

const store = useStore()
const rightPanel = ref()

interface Props {
  clickNotClose?: boolean,
  buttonTop?: number
}
const props = withDefaults(defineProps<Props>(), {
  clickNotClose: false,
  buttonTop: 250
})

// 是否默认展开
const show = ref(false)

const theme = computed({
  get: () => store.state.settings.theme,
  set: () => { }
})

watch(
  () => show,
  (newVal, oldVal) => {
    if (newVal.value) {
      addEventClick()
    }
  },
  {
    immediate: true, // 立即执行
    deep: true // 深度监听
  })

onMounted(() => {
  insertToBody()
})

function addEventClick() {
  window.addEventListener('click', closeSidebar)
}

function closeSidebar(evt: any) {
  const parent = evt.target.closest('.rightPanel')
  if (!parent) {
    show.value = false
    window.removeEventListener('click', closeSidebar)
  }
}

function insertToBody() {
  const elx = rightPanel.value
  const body = document.querySelector('body')!!
  body.insertBefore(elx, body.firstChild)
}


</script>


<style>
.showRightPanel {
  overflow: hidden;
  position: relative;
  width: calc(100% - 15px);
}
</style>

<style lang="scss" scoped>
.rightPanel-background {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}

.rightPanel {
  width: 100%;
  max-width: 260px;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
  transform: translate(100%);
  background: #fff;
  z-index: 2000;
}

.show {
  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);

  .rightPanel-background {
    z-index: 2000;
    opacity: 1;
    width: 100%;
    height: 100%;
  }

  .rightPanel {
    transform: translate(0);
  }
}
.button-panel {
  text-align: center;
  font-size: small;
  position: absolute;
  left: -77px;
  border-radius: 6px 0 0 6px !important;
  z-index: 0;
  pointer-events: auto;
  cursor: pointer;
  padding: 8px 8px 0px;
  border-top-left-radius: 5.5px;
  border-bottom-left-radius: 5.5px;
  box-shadow: 0 0 50px 0 #dcdfe6;
  transform: translateY(-50%);
  border-radius: 5.5px;
}
.handle-button {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 10px;
  color: #3698fd;
  background: #ebf5ff;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  border-radius: 5.5px;
  .svg-icon {
    margin-top: 10%;
  }
}
.handle-button:hover {
  background-color: #3698fd;
  color: #fff;
}
</style>
